<!-- html代码  -->
<template>
    <div>
        <!-- 父子组件传值  -->
        <Title :title="title"></Title>
        <!-- 1.提供图表容器 -->
        <div ref="left2" style="height: 150px;"></div>
    </div>
</template>
<script>
// 2.引入饼图构造函数 
import { Pie } from '@antv/g2plot';
// 路径中@表示src
import { get } from '@/utils/request'
export default {
    data() {
        return {
            title: '设备状态分布',
            // 存放设备数据 
            empData:[]
        }
    },
    methods: {
        // 加载图表函数
        loadPie() {
            const piePlot = new Pie(this.$refs.left2, {
                appendPadding: 10,
                data:this.empData,
                angleField: 'value',
                // 按照类型分组颜色
                colorField: 'type',
                color:({type})=>{
                    if(type == '在线'){
                        return '#a2a6ec'
                    }
                    return 'pink'
                },
                radius: 0.8,
                // 图例属性 
                legend:{
                    // 给分类图例设置样式 
                    itemName:{
                        style:{
                            fill:'white'
                        }
                    }
                },
                // 文本
                label: {
                    type: 'outer',
                    // content: '{name} {percentage}',
                    content:'{name}',
                    // 修改文本样式 style
                    style: {
                        fill: 'white'
                    }
                },
                interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
            });

            piePlot.render();
        },
        // 获取设备数据 统计在线离线状态 async await 异步编程解决方案 
        async getEmpData() {
            let res = await get('/dashboard/queryDeviceOnlineNumber');
            console.log(res,'获取响应');
            this.empData = res.data;
        }
    },
    async mounted() {
        // 确保先获取数据 再将数据设置给图表
        await this.getEmpData();
        this.loadPie()
    }
}
</script>
<!-- css代码 -->
<style lang="less" scoped></style>